<template>
  <div class="search_item">
    <el-row>
      <el-col :span="24">
        <el-button type="primary" @click='open' size="large"  icon="plus">新增商品</el-button>
      </el-col>
    </el-row>
    <div class="mb20">
      <form-tpl
        :formRule = formRule
        @formsubmit = 'onSubmit'
      ></form-tpl>
    </div>
    <div class="mb20">
      <el-button type="primary" @click="callSelectModal">改变列表展示项</el-button>
      <el-button type="primary"  @click="$router.push({path: '/operational/createCampaign'})">设置优惠活动</el-button>
      <el-button type="primary"  @click="$router.push({path: '/operational/integralCreate'})">创建积分策略</el-button>
      <el-button type="primary" @click="exportFile()">导出商品信息</el-button>
    </div>
    <goods-table
      ref = 'table'
      :loading = 'loading'
      :tabledata = 'pageData'
      @update = 'setPageData'
    ></goods-table>
    <div>
      <tour-pagination
        :page = page
        :count = pageData.count
        :size = size
        @change = 'pagechange'
      ></tour-pagination>
    </div>
  </div>
</template>
<script>
  import formTpl from 'components/formtpl.vue'
  import tourPagination from 'components/tourPagination.vue'
  import goodsTable from 'components/goods/goodsTable.vue'
  import { mapActions } from 'vuex'
  import {
    setDefaultFromQuery
  } from 'src/model/form.translate.js'
  import {
    GetGoodsList
  } from 'src/api/index.js'
  import {
    otherGoodsModel
  } from 'src/model/goodsModel.js'
  import {
    valueTypeTransformAll
  } from 'util'
  export default {
    data () {
      let queryParam = this.$store.state.route.query
      let page = this.$store.state.route.query.page || 1
      return {
        formRule: setDefaultFromQuery(otherGoodsModel.model, queryParam),
        page: Number(page) || 0,
        pageData: '',
        size: 10,
        params: {},
        loading: false
      }
    },
    created () {
      this.params = this.$store.state.route.query
      this.setPageData()
    },
    methods: {
      ...mapActions({
        exportFile: 'EXPORT_GOODS_FILE'
      }),
      goPage () {
        this.setPageData()
      },
      onSubmit (data) {
        let params = {}
        for (let key in data) {
          if (data[key] !== '') {
            params[key] = data[key]
          }
        }
        this.params = params
        this.goPage()
      },
      setPageData () {
        let params = this.params
        if (params['statusList'] && params['statusList'].indexOf('all') > -1) {
          params['statusList'] = []
        }
        this.loading = true
        let curParams = valueTypeTransformAll(params, otherGoodsModel.model)
        GetGoodsList({
          ...curParams,
          statusList: ['0'],
          size: this.size,
          page: this.page
        }).then((res) => {
          this.loading = false
          if (res.data.code !== 100) {
            this.$alert(res.data.message)
            return
          }
          this.pageData = res.data.data
        })
      },
      pagechange ({page, size}) {
        this.page = page
        this.size = size
        this.goPage()
      },
      open () {
        this.$router.push({
          path: '/goods/addGoods'
        })
      },
      callSelectModal () {
        this.$refs.table.callChangeCol()
      }
    },
    components: {
      formTpl,
      tourPagination,
      goodsTable
    }
  }
</script>
<style>
  .form_wrap{
    margin-top: 20px;
  }
</style>
